#@weiXinLayout("活动详情页面")
#define weiXinMain()
#@navBar("活动详情页面",contextPath+"/weixin/activity")
<div>
<div class="swiper-container">
    <div class="swiper-wrapper">
    	#for(x:activity.imgs())
        <div class="swiper-slide"><img class="slide-item" src="#(x??'')" alt=""></div>
        #else
        <div class="swiper-slide"><img class="slide-item" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=182036984,3812106202&fm=26&gp=0.jpg" alt=""></div>
        #end
    </div>
    <div class="swiper-pagination"></div>
</div>
<div id="content"></div>
<div class="weui-tab ">
    <div class="weui-tabbar tab-bar-fixbottom" style="display: flex;justify-content: space-between">
        <div class="tel">价格：￥<span id="price"></span></div>
        <div class="orderBtnContainer"id="orderBtn">点我预订活动</div>
    </div>
</div>
</div>
#end

#define weiXinCss()
<style>
    body{
        background-color: #EFEFF4;
    }

    .section-white{
        background-color: white;
        padding:5px;
        margin-bottom: 5px;
    }
    .desc{
        color: #9d9d9d;
    }
    .orderBtnContainer{
        padding: 10px;
        background-color: #e2541f;
        color: white;
    }
    .tel{
        font-weight: bolder;
        font-size:18px ;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #e2541f;
        margin-left: 10px;
    }
    #content{
    	margin-bottom:50px;
    }
    img{
    	width:100%
    }
</style>
#end

#define weiXinJs()
<script type="text/x-mustache" id="template">
     {{#items}}
        <div class="section-white">
            <h4>{{name}}</h4>
            <p class="desc">活动时间：{{start_time}} 至 {{end_time}}</p>
        </div>

        <div class="section-white">
            <h4>集合地点</h4>
            <p class="desc">{{address}}</p>
        </div>

        <div class="section-white">
            <h4>领队联系方式</h4>
            <p class="desc">{{contactor}}:{{mobile}}</p>
        </div>

        <div class="section-white">
            <h4>活动内容详情</h4>
            <p class="desc">{{{content}}}</p>
        </div>
     {{/items}}
</script>
<script>
    $(document).ready(function(){
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000,
        });

        function initData(){
            var config ={
                "url":"#(contextPath)/weixin/activity/queryActivityById",
                "data":{id:"#(id??'0')"},
                "successCallBack":function(resp){
                    var temp = $("#template").html();
                    var data =resp.data;
                    var content = Mustache.render(temp,{items:resp.data});
                    $("#content").html(content);
                    $("#price").html(data.price);
                }
            }
            var ajax = new AjaxUtils(config);
            ajax.executeRequest();
        }

        initData();
        $("#orderBtn").click(function(){
            window.location.href="#(contextPath)/weixin/activity/activityOrder?id=#(id??'0')"
        })

    })
</script>
#end